<template>
    <h1>demo1</h1>
    <input type="text" v-model="x">
    <p>{{ y }}</p>
    <p>{{ z }}</p>
    <button @click="getData()">GET X</button>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'

const x = ref(100);
const y = ref(x.value + 100);
const z = ref(x.value * 2);

watch(x, (nv, ov) => {
    // console.log(nv, ov);
    y.value = parseInt(x.value) + 100;
    z.value = parseInt(x.value) * 2;
})

const getData = () => {
    console.log(x.value);
}
</script>